<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>chat room websocket</title>
 <link rel="stylesheet" href="../css/bootstrap.min.css">
 <script src="../js/jQuery-2.2.2-min.js" ></script>
 <style>
 h3{
 text-align: center;
 }
 </style>
</head>
<body class="container" style="width: 60%">
	 <div class="form-group" ></br>
	 <h3>聊天室</h3>
	 <textarea id="message_content" class="form-control" readonly="readonly" cols="50" rows="10"></textarea>
	 </div>
	 <div class="form-group" >
	 <label for="in_user_name">⽤户姓名 &nbsp;</label>
	 <input id="in_user_name" value="" class="form-control" /></br>
	 <button id="user_join" class="btn btn-default" >加⼊聊天室</button>
	 <button id="user_exit" class="btn btn-success" >离开聊天室</button>
	 </div>
	 <div class="form-group" >
	 <label for="in_room_msg" >群发消息 &nbsp;</label>
	 <input id="in_room_msg" value="" class="form-control" /></br>
	 <button id="user_send_all" class="btn btn-default" >发送消息</button>
	 </div>
 
 <script type="text/javascript">
 
 $(document).ready(function(){
	 var urlPrefix ='ws://localhost:8080/wechat/';
	 var ws = null;
	 $('#user_join').click(function(){
	 var username = $('#in_user_name').val();
	 var url = urlPrefix + username;
	 ws = new WebSocket(url);
	 ws.onopen = function () {
	 console.log("建⽴ websocket 连接...");
	 };
	 ws.onmessage = function(event){
	 //服务端发送的消息
	 $('#message_content').append(event.data+'\n');
	 };
	 ws.onclose = function(){
	 $('#message_content').append('用户['+username+'] 已经离开聊天室!');
	 console.log("关闭 websocket 连接...");
	 }
	 });
	 //客户端发送消息到服务器
	 $('#user_send_all').click(function(){
	 var msg = $('#in_room_msg').val();
	 if(ws){
	 ws.send(msg);
	 }
	 });
	 // 退出聊天室
	 $('#user_exit').click(function(){
	 if(ws){
	 ws.close();
	 }
	 });
	 })
 
 </script>
 
</body>

</html>
